<template>
  <div class="plugin">
    <div class="hobbyList_card" :class="flag? 'active':''">
      <div class="header"
           v-for="(item,index) in state"
           :key="index"
      >
        <el-row :gutter="20">
          <el-col
              :span="2"
              class="text"
          >
            <div class="hobbyList_name">{{ item.label }}:</div>
          </el-col>
          <el-col
              :span="22"
              class="text_comtents"
          >
            <div
                v-for="choice in item.choises"
                :key="choice.id"
                :class="choice.isChecked?'success':''"
                @click="changeColor(choice)"
            > {{ choice.name }}
            </div>
          </el-col>
        </el-row>

      </div>
      <div class="reset-button" @click="clickReset">重置</div>
    </div>

  </div>

</template>

<script lang="ts">

import {defineComponent} from "vue";

export default defineComponent({
  name: 'selectionContent',
});
</script>

<script lang="ts" setup>
import {onMounted, computed, ref} from "vue";
import {getFilterListRequest} from "@/apis/course/course-cs/index"
import {useRouter} from "vue-router";
import {getFilterItemModel, getFilterListType} from "@/apis/course/course-cs/model/index";
import {reqHotList} from "@/apis/source";

const router = useRouter();
//自定义事件
const emit = defineEmits<{
  (event:"getVideo",videoList:any):void
}>()

//我的兴趣列表pageSize
const selector_pageSize = ref<number>(20)
//我的兴趣列表pageNum
const selector_pageNum = ref<number>(0)
//视频pageSize
const video_pageSize = ref<number>(20)
//视频pageNum
const video_pageNum = ref<number>(0)
//我的兴趣列表
const selectorList = ref<getFilterListType>([])

//内容样式
const formatList = ref<any>({
  label:'内容格式',
  choises:[
    {name: '视频', id: '001'},
    {name: '图片', id: '002'},
    {name: '文章', id: '003'}]
})

onMounted(() => {
  //发送请求
  mySelectorList();
});
const state = computed(() => { // computed 计算属性
  return selectorList.value
})

//获取我的列表标签
const mySelectorList = async () => {
  const res = await getFilterListRequest(selector_pageSize.value, selector_pageNum.value)
  selectorList.value = [res[0], formatList.value]
  selectorList.value.forEach((item: any) => {
    item.choises.forEach((choice: any) => choice.isChecked = false)
  })
}

//点击tag标签切换颜色
const changeColor = async (item: getFilterItemModel) => {
  item.isChecked = !item.isChecked
  if(item.isChecked){
    if(video_pageNum.value === 1){
      video_pageNum.value = 0
    }else{
      video_pageNum.value += 1
    }
    const res = await reqHotList(video_pageSize.value,video_pageNum.value)
    emit('getVideo',res.content)
  }
}
//点击重置
const clickReset = () => {
  state.value.forEach((item: any) => {
    item.choises.forEach((choice: any) => choice.isChecked = false)
  })
}

</script>

<style scoped lang="scss">
/*兴趣列表*/
.plugin {
  position: relative;
  background-color: #f5f7f9;


  .reset-button {
    position: absolute;
    right: 44px;
    top: 41px;
    cursor: pointer;
    font-size: 14px;
    color: #f93684;
    //display: none;
  }
}

.hobbyList_card {
  background-color: #f5f7f9;
  padding: 26px 30px;
  border-radius: 4px;
  margin-bottom: 10px;
  position: relative;

  .success {
    background-color: #f93684;
    color: #fff;
  }
}

.active {
  height: 450px;
}


.text {
  display: flex;
  flex-wrap: wrap;
  color: #b1b5c1;
  padding: 7px 0;

}

.hobbyList_name {
  margin-left: 15px;
  padding: 7px 0;
  font-size: 14px;
}

.text_comtents {
  width: 100px;
  margin: 10px 0;
  color: #7D8090;
  display: flex;
  flex-wrap: wrap;

}

.content {
  float: left;
  font-size: 14px;

  .format {
    color: #b1b5c1;
  }

  p {
    color: #7D8090;

  }
}

.text_comtents div {
  padding: 7px 13px;
  margin: 0 24px 10px 0px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}


</style>
